<template>
  <div>
    <medicalCard title="订单管理">
      <template v-slot:body>
        <Tabs type="card" @on-click="changeTab" v-model="order_state">
          <TabPane label="全部" name=""></TabPane>
          <TabPane label="已发起" name="1"></TabPane>
          <TabPane label="已付款" name="2"></TabPane>
          <TabPane label="已接单" name="3"></TabPane>
          <TabPane label="已取消" name="4"></TabPane>
          <TabPane label="服务中" name="5"></TabPane>
          <TabPane label="已完成" name="6"></TabPane>
          <TabPane label="已验收" name="7"></TabPane>
          <TabPane label="已评价" name="8"></TabPane>
        </Tabs>
        <template>
          <Select style="width:100px;" v-model="params.type" @on-change="changeType">
            <Option value="">全部</Option>
            <Option value="2">报价</Option>
            <Option value="1">一口价</Option>
          </Select>
        </template>
        <vxe-table border="outer" header-align="center" ref="my_table" :loading="loading" :data="tableData" :stripe="true" style="margin-top: 5px;margin-bottom: 10px" :highlight-hover-row="true" :scroll-x="{gt: 0}" align="center" show-overflow="tooltip">
          <vxe-table-column field="name" title="下单用户" fixed="left" width="200"></vxe-table-column>
          <vxe-table-column field="order_number" title="订单编号" min-width="200"></vxe-table-column>
          <vxe-table-column field="visitor_name" title="就诊人" min-width="200"></vxe-table-column>
          <vxe-table-column field="give_service_name" title="需求名称" min-width="200"></vxe-table-column>
          <vxe-table-column field="hospital_name" title="医院" min-width="200"></vxe-table-column>
          <vxe-table-column field="department" title="科室" min-width="200"></vxe-table-column>
          <vxe-table-column field="expectedTime" title="期望时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="expected_price" title="期望价格" min-width="200"></vxe-table-column>
          <vxe-table-column field="payable_amount" title="支付金额" min-width="200"></vxe-table-column>
          <vxe-table-column field="give_service_name" title="类型" min-width="200"></vxe-table-column>
          <vxe-table-column field="createTime" title="下单时间" min-width="200"></vxe-table-column>
          <vxe-table-column field="state" title="状态" min-width="200">
            <template v-slot="{ row }">
              <span>{{row.state | TypeFilter(orderStateArr)}}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column width="200" fixed="right" title="操作">
            <template scp-layout="true" v-slot="{ row }">
              <ButtonGroup shape="circle">
                <Button type="success" icon="ios-book-outline" style="padding: 0" @click="edit(row)"></Button>
                <!-- <Button type="info" icon="logo-yen" style="padding: 0" @click="quotation(row)"></Button>
                <Button type="warning" icon="ios-chatbubbles" style="padding: 0" @click="evaluate(row)"></Button> -->
                <Button type="error" icon="md-trash" style="padding: 0" @click="del(row)"></Button>
                <!-- <Button type="primary" icon="md-paper" style="padding: 0" @click="del(row)"></Button> -->
              </ButtonGroup>
            </template>
          </vxe-table-column>
        </vxe-table>
        <Row type="flex" justify="end">
          <Page :current="params.pageNo" :total="params.totalRecord" show-sizer :page-size="params.pageSize" show-elevator
                @on-change="pageAction" @on-page-size-change="pageSizeChange"/>
        </Row>
      </template>
    </medicalCard>
    <Modal title="详情" v-model="modal" width="1000">
      <Row>
        <Col span="11">
          <Card dis-hover class="mb10">
            <p slot="title">订单信息</p>
            <CellGroup>
              <Cell title="订单编号" :extra="formItem.order_number" />
              <Cell title="下单时间" :extra="formItem.createTime" />
              <Cell title="支付时间" :extra="formItem.pay_time" />
              <Cell title="订单金额" :extra="formItem.payable_amount" />
              <Cell title="优惠金额" :extra="formItem.preferential_price" />
              <Cell title="实付金额" :extra="formItem.payable_amount" />
            </CellGroup>
          </Card>
        </Col>
        <Col span="11" offset="2">
          <Card dis-hover class="mb10">
            <p slot="title">就诊信息</p>
            <CellGroup>
              <Cell title="就诊人姓名" :extra="formItem.visitor_name" />
              <Cell title="性别" :extra="formItem.visitor_sex" />
              <Cell title="出生日期" :extra="formItem.birthdayDay" />
              <Cell title="年龄" :extra="formItem.visitor_age" />
              <Cell title="手机号" :extra="formItem.visitor_tel" />
              <Cell title="身份证号码" :extra="formItem.visitor_card_no" />
            </CellGroup>
          </Card>
        </Col>
      </Row>
      <Card dis-hover class="mb10">
        <p slot="title">预约信息</p>
        <CellGroup>
          <Row>
            <Col span="10">
              <Cell title="服务项目" :extra="formItem.give_service_name" />
              <Cell title="就诊医院" :extra="formItem.hospital_name" />
              <Cell title="科室" :extra="formItem.department" />
              <Cell title="期望就诊时间" :extra="formItem.expectedTime" />
              <Cell title="预约电话" :extra="formItem.tel" />
              <Cell title="期望价格" :extra="formItem.expect_price" />
              <Cell title="需求备注" :extra="formItem.note" />
              <Cell title="报告类型" :extra="formItem.report_type" />
              <Cell title="登记号" :extra="formItem.registration_number" />
            </Col>
            <Col span="10" offset="4">
              <Cell title="就诊二维码" :extra="formItem.qrcode" />
              <Cell title="报告单条形码" :extra="formItem.barCode" />
              <Cell title="药品类型" :extra="formItem.drug_type" />
              <Cell title="药品名称" :extra="formItem.drug_name" />
              <Cell title="处方照片" :extra="formItem.prescription_picture" />
              <Cell title="床号" :extra="formItem.bed_number" />
              <Cell title="自理能力" :extra="formItem.self_care_ability" />
              <Cell title="服务天数" :extra="formItem.service_days" />
            </Col>
          </Row>
        </CellGroup>
      </Card>
      <Row>
        <Col span="11">
          <Card dis-hover class="mb10">
            <p slot="title">寄件信息</p>
            <CellGroup>
              <Cell title="姓名" :extra="formItem.sending_name" />
              <Cell title="手机号" :extra="formItem.sending_tel" />
              <Cell title="收件地址" :extra="formItem.receiving_address" />
            </CellGroup>
          </Card>
        </Col>
        <Col span="11" offset="2">
          <Card dis-hover class="mb10" style="height:199px;">
            <p slot="title">接单信息</p>
            <CellGroup>
              <Cell title="名称" :extra="formItem.receiving_name" />
              <Cell title="头像" :extra="formItem.receiving_picture" />
            </CellGroup>
          </Card>
        </Col>
      </Row>
    </Modal>
    <Modal title="查看报价" v-model="modal1" width="1000">
      <Table :columns="columns" :data="dataList"></Table>
    </Modal>
    <Modal title="查看评价" v-model="modal2" width="1000">
      <Table :columns="columns1" :data="dataList1"></Table>
    </Modal>
  </div>
</template>
<script>
import medicalCard from '@/view/medical-page/components/medical-card'
import { findOrderGoodsList, deleteOrderGoodsById } from '@/api/medical.js'
export default {
  name: 'order-list',
  data () {
    return {
      order_state: '',
      modal2: false,
      modal1: false,
      modal: false,
      formItem: {},
      loading: false,
      columns: [
        { title: '接单人信息', key: 'name', align: 'center' },
        { title: '报价', key: 'name', align: 'center' },
        { title: '备注', key: 'name', align: 'center' },
        { title: '类型', key: 'name', align: 'center' },
        { title: '报价时间', key: 'name', align: 'center' },
        { title: '雇佣时间', key: 'name', align: 'center' },
        { title: '签到时间', key: 'name', align: 'center' },
        { title: '核销时间', key: 'name', align: 'center' },
        { title: '状态', key: 'name', align: 'center' },
        { title: '操作', key: 'action', align: 'center' }
      ],
      columns1: [
        { title: '订单编号', key: 'name', align: 'center' },
        { title: '评价人', key: 'name', align: 'center' }
      ],
      dataList: [],
      dataList1: [],
      tableData: [],
      params: {
        pageNo: 1,
        pageSize: 10,
        totalRecord: 0
      },
      orderStateArr: [
        { label: '已发起', value: '1' },
        { label: '已付款', value: '2' },
        { label: '已接单', value: '3' },
        { label: '已取消', value: '4' },
        { label: '服务中', value: '5' },
        { label: '已完成', value: '6' },
        { label: '已验收', value: '7' },
        { label: '已评价', value: '8' }
      ]
    }
  },
  filters: {
    TypeFilter: function (value, array) {
      let name = ''
      array.forEach(element => {
        if (value === element.value) {
          name = element.label
        }
      })
      return name
    }
  },
  components: {
    medicalCard
  },
  methods: {
    init () {
      this.params.state = this.order_state
      this.loading = true
      findOrderGoodsList(this.params).then(ret => {
        if (ret.data.errcode === 0) {
          this.tableData = ret.data.data.results
          this.params.totalRecord = ret.data.data.totalRecord
          this.loading = false
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    pageAction (page) {
      this.params.pageNo = page
      this.init()
    },
    pageSizeChange (e) {
      this.params.pageSize = e
      this.init()
    },
    edit (item) {
      this.modal = true
      this.formItem = item
      this.formItem.payable_amount = this.formItem.payable_amount.toString()
      this.formItem.visitor_sex = this.formItem.visitor_sex === '1' ? '男' : this.formItem.visitor_sex === '2' ? '女' : ''
    },
    quotation (item) { // 查看报价
      this.modal1 = true
      this.formItem = item
    },
    evaluate (item) { // 查看评价
      this.modal2 = true
    },
    del (item) { // 删除订单
      this.$Modal.confirm({
        title: '<p style="color:#f60;text-align:center">\n' +
          '                    <Icon type="ios-information-circle"></Icon>\n' +
          '                    <span>删除操作</span>\n' +
          '                </p>',
        content: '<p>确定要执行该操作吗？</p>',
        width: 300,
        loading: true,
        onOk: () => {
          deleteOrderGoodsById({ order_goods_id: item.order_goods_id }).then(ret => {
            if (ret.data.errcode === 0) {
              this.$Message.success({
                content: '操作成功,\n' + ret.data.errmsg
              })
              this.init()
            } else {
              this.$Message.error({
                content: '操作失败,\n' + ret.data.errmsg
              })
            }
          })
          this.$Modal.remove()
        }
      })
    },
    changeTab (name) { // 切换tab页
      console.log(name)
      if (this.order_state === 0) {
        this.order_state = ''
      }
      this.params.state = this.order_state
      this.init()
    },
    changeType (value) {
      this.params.state = value
      this.init()
    }
  },
  mounted () {
    this.init()
  }
}
</script>
<style scoped lang="less">
  .mb10 {
    margin-bottom: 10px;
  }
</style>
